<template>
  <div class="divSelAll">
    <template>
      <div class="divInputAll">
        <div class="divInput">
          <div class="inputFont">起始时间：</div>
          <div style="float:left;">
            <el-date-picker size="mini" v-model="queryRegister.stateTime" type="datetime" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" style="float: left;width: 200px;"></el-date-picker>
          </div>
        </div>
        <div class="divInput">
          <div class="inputFont">结束时间：</div>
          <div style="float:left;">
            <el-date-picker size="mini" v-model="queryRegister.endTime" type="datetime" format="yyyy-MM-dd"
              value-format="yyyy-MM-dd" style="float: left;width: 200px;"></el-date-picker>
          </div>
        </div>
        <div class="likeBtn">
          <el-button size="mini" type="success" icon="el-icon-search" @click="loadRegister">查询</el-button>
          <el-button size="mini" @click="allRegister" plain>重置</el-button>
        </div>
      </div>
      <el-table :data="registerList" border style="width: 100%;font-size: x-small;margin: auto;line-height: 25%;"
        :row-style="{ height: '22px' }" :cell-style="{ padding: '1px' }">
        <el-table-column fixed prop="directoryNum" label="登记薄编号">
        </el-table-column>
        <el-table-column prop="higherRoomRepose" label="房屋坐落">
        </el-table-column>
        <el-table-column prop="proposerName" label="所有权人（份额）">
        </el-table-column>
        <el-table-column prop="higherMound" label="丘号">
        </el-table-column>
        <el-table-column prop="registerTime" label="登记时间">
        </el-table-column>
        <el-table-column prop="aa" label="登薄人/终审人">
        </el-table-column>
        <el-table-column label="操作" width="110">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.directoryId)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
    <div class="divPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryRegister.currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="queryRegister.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerList: [
      ],
      page: {
        total: 0, //总条数
      },
      queryRegister: {
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
        stateTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    loadRegister() {
      this.$axios.post("/register-serv/directory/selAll", this.queryRegister).then((res) => {
        this.registerList = res.data.data.list;
        this.page.total = res.data.data.total;
        
      });
    },
    //详情按钮，转跳登记薄封面，并向下个页面传递directoryId
    handleClick(directoryId) {
      sessionStorage.setItem("directoryId",directoryId);
      this.$router.push({
        path:"/Dengjibo",
        query:{
          directoryId:directoryId,
        }
      });
      
        
    },
    //每一页显示的条数变化时，每页五条/每页十条
    handleSizeChange(val) {
      this.queryRegister.pageSize = val;
      this.loadRegister();
    },
    //当前页数变化时,上一页/下一页
    handleCurrentChange(val) {
      this.queryRegister.currentPage = val;
      this.loadRegister();
    },
    allRegister() {
      this.queryRegister = {
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
        stateTime: "",
        endTime: "",
      };
      this.loadRegister();
    },
  },
  mounted() {
    this.loadRegister();
  },
};
</script>
<style scoped>
.divInputAll {
  background-color: white;
  width: 100%;
  height: 80px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  border: 0px solid red;
  width: 25%;
  height: 100%;
  line-height: 70px;
  margin-left: 50px;
  float: left;
}

.inputFont {
  float: left;
  font-size: 10px;
}

.likeBtn {
  float: right;
  margin-right: 50px;
  line-height: 60px;
}
</style>
